<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XMind2TestCase</title>
    <link rel="shortcut icon" href="{{ url_for('static',filename='favicon.ico') }}" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" media="all" href="{{ url_for('static',filename='css/pure-min.css') }}">
    <link rel="stylesheet" type="text/css" media="all" href="{{ url_for('static',filename='css/custom.css') }}">
    <style>
        /* Modal 背景 */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        /* Modal 内容 */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
        }
        /* 关闭按钮 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 访问禅道用例导入工具入口，增加 id 便于操作 -->
    <a href="{{ config.zen_tao_importer_url }}" id="zentaoLink" class="pure-button"
   style="position: absolute; top: 50px; right: 70px; z-index: 1000; color: green;">
   访问禅道用例导入工具
    </a>

    <!-- 页面右下角新增修改配置入口 -->
    <a href="javascript:void(0);" id="modifyConfigBtn" class="pure-button"
       style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
       修改配置
    </a>

    <div class="splash-container">
        <div class="splash">
            <h1>Xmind to TestCase</h1>
            <div class="splash-head">
                <div class="select-xmind splash-subhead">
                    <form method="post" enctype="multipart/form-data">
                        <label id="file-label" for="file">
                            --> 点击这里选择您的XMind文件 <--
                        </label>
                        <input id="file" accept=".xmind" type="file" name="file" required/><br>
                        <input type="submit" class="pure-button" value="开始转换"/>
                    </form>
                </div>
                {% if records %}
                    <table class="pure-table recent-xminds">
                        <thead>
                            <tr>
                                <th width="60%">NAME</th>
                                <th width="17%">TIME</th>
                                <th>ACTIONS</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for record in records %}
                            <tr>
                                <td title="{{ record[1] }}">{{ record[0] }}</td>
                                <td>{{ record[2] }}</td>
                                <td>
                                    <a href="{{ url_for('uploaded_file',filename=record[1]) }}">XMIND</a> |
                                    <a href="{{ url_for('download_zentao_file',filename=record[1]) }}">CSV</a> |
                                    <a href="{{ url_for('download_testlink_file',filename=record[1]) }}">XML</a> |
                                    <a href="{{ url_for('preview_file',filename=record[1]) }}">PREVIEW</a> |
                                    <a href="{{ url_for('delete_file',filename=record[1], record_id=record[4]) }}">DELETE</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p>Welcome! Xmind2TestCase is a tool to help you convert xmind file to testcase file, and then you
                        will be able to import the file into TestLink or ZenTao. Are you ready? Upload your xmind file now.</p>
                {% endif %}
            </div>
            <div class="footer-home">
                <a href="{{ url_for('static', filename='guide/index.html') }}" target="_blank">User Guide</a> |
                <a href="https://github.com/zhuifengshen/xmind2testcase/issues/new" target="_blank">Report Issue</a> |
                Powered by <a href="https://github.com/zhuifengshen/xmind2testcase" target="_blank">XMind2TestCase</a>
            </div>
        </div>
    </div>

    <!-- 弹窗：修改配置 -->
    <div id="configModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>修改配置</h2>
            <label for="zenTaoUrl">禅道用例导入工具默认URL:</label>
            <!-- 提示：请确保输入完整 URL（例如：http://www.baidu.com） -->
            <input type="text" id="zenTaoUrl" name="zenTaoUrl" value="{{ config.zen_tao_importer_url }}" style="width: 100%; margin-bottom: 10px;"/>
            <div style="text-align: right;">
                <button id="resetConfig" class="pure-button" style="margin-right: 10px;">重置</button>
                <button id="saveConfig" class="pure-button">保存</button>
            </div>
        </div>
    </div>

    <script>
        // 更新选择文件后显示的文件名
        document.getElementById("file").addEventListener("change", function () {
            if (this.value) {
                document.getElementById("file-label").innerHTML = this.value.split("\\").pop();
            }
        });

        // 获取弹窗和相关按钮元素
        var modal = document.getElementById("configModal");
        var modifyBtn = document.getElementById("modifyConfigBtn");
        var closeBtn = document.getElementsByClassName("close")[0];

        // 点击“修改配置”按钮时显示弹窗
        modifyBtn.onclick = function() {
            modal.style.display = "block";
        }

        // 点击关闭按钮 (×) 关闭弹窗
        closeBtn.onclick = function() {
            modal.style.display = "none";
        }

        // 点击弹窗外区域关闭弹窗
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        document.getElementById("saveConfig").onclick = function() {
        const newUrl = document.getElementById("zenTaoUrl").value.trim();
        if (!newUrl.startsWith("http://") && !newUrl.startsWith("https://")) {
            alert("请输入完整的URL（包含协议，例如：http://www.baidu.com）");
            return;
        }

        fetch('/save-config', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                zen_tao_importer_url: newUrl
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('配置已保存，页面即将刷新');
                location.reload();
            } else {
                alert('保存失败: ' + (data.message || '未知错误'));
            }
        });
    }

    // 重置按钮修改
    document.getElementById("resetConfig").onclick = function() {
        fetch('/get-config')
            .then(response => response.json())
            .then(config => {
                document.getElementById("zenTaoUrl").value = config.zen_tao_importer_url;
            });
        }
    </script>
</body>
</html>
